<template>
  <div id="youxi1"
    :class="shoplist.gift_list.length<10 && cur == 2?'dressUpExchange dressUpExchange1':'dressUpExchange' "
    :style="shoplist.goods_list.length<10 && cur == 1?'height:100vh':''">
    <div class="dress_load" v-if="dressloadShow">
      <!-- <van-loading color="#1989fa" size="80" :vertical="true" class="dress_load_load" /> -->
    </div>
    <HeaderComponent class="header_" background="#00000000" color="#000000" image_="1" size="4.8vw">
      <template v-slot:taber_tab>
        <div class="title_">
          <div @click="homePage('1')">
            <span :class="{ active: cur == 1 }">装扮兑换</span>
            <div v-show="cur == 1"></div>
          </div>
          <div @click="homePage('2')">
            <span :class="{ active: cur == 2 }">礼物兑换</span>
            <div v-show="cur == 2"></div>
          </div>
        </div>
      </template>
      <template v-slot:share>
        <span class="exchange-record" @click="Jump_ex">兑换记录</span>
      </template>
    </HeaderComponent>
    <div class="fragment">
      <div class="nth_farmg">
        <span>装扮碎片</span>
        <div>
          <img :src="require('@/assets/images/playrules/zuanban.png')" alt="" />
          <span>{{ shoplist.goods_num }}</span>
        </div>
      </div>
      <div></div>
      <div class="nth_farmg">
        <span>礼物碎片</span>
        <div>
          <img :src="require('@/assets/images/playrules/gift.png')" alt="" />
          <span>{{ shoplist.gift_num }}</span>
        </div>
      </div>
    </div>

    <div class="body_content" v-show="cur == 1">
      <div v-for="(item, index) in shoplist.goods_list" :key="index" class="border_list">
        <div class="box_fa">
          <img :src="item.imageFile" alt="" />
          <span>{{ item.goodsName }}</span>
          <div>
            <img :src="require('@/assets/images/playrules/zuanban.png')" alt="" />
            <span>{{ item.gold }}碎片</span>
          </div>
        </div>
        <div class="button_fa">
          <div @click="Turn('1', item, '1')">兑换</div>
          <div @click="Turn('2', item, '1')">赠送</div>
        </div>
      </div>
    </div>
    <div class="body_content body_content_" v-show="cur == 2">
      <div v-for="(item, index) in shoplist.gift_list" :key="index" class="border_list border_list_">
        <div></div>
        <div class="box_fa">
          <img :src="item.icon" alt="" />
          <span>{{ item.name }}</span>
          <span>价值{{ item.money }}钻</span>
          <div>
            <img :src="require('@/assets/images/playrules/gift.png')" alt="" />
            <span>{{ item.gold }}</span>
          </div>
        </div>
        <div class="button_fa button_fa_">
          <div @click="Turn('1', item, '2')">兑换</div>
        </div>
      </div>
    </div>

    <!-- 翻拍规则 -->
    <div class="overlay" v-show="Turn_s" @click="Turn_s = !Turn_s"></div>
    <div class="getRules_s" v-show="Turn_s">
      <div class="OwnExchange" v-show="isExchange">
        <span>兑换<span v-if="giftdetails.day">装扮</span><span v-else>礼物</span>【{{
            giftdetails.goodsName ? giftdetails.goodsName : giftdetails.name
          }}】</span>
        <div class="image_position">
          <div></div>
          <img :src="
              giftdetails.imageFile ? giftdetails.imageFile : giftdetails.icon
            " alt="" />
        </div>
        <div class="AdditionSubtraction">
          <div @click="reduce">
            <div class="jian"></div>
          </div>
          <div>
            <input type="number" v-model="exchange_num" maxlength="2" />
          </div>
          <div @click="plus">+</div>
        </div>
        <span v-if="giftdetails.day">有效期 : {{ giftdetails.day * exchange_num }} 天</span>
        <div @click="ExchangeGifts">
          <span>消耗</span>
          <img v-if="shopexchange == '1'" :src="require('@/assets/images/playrules/zuanban.png')" alt="" />
          <img v-else :src="require('@/assets/images/playrules/gift.png')" alt="" />
          <span>{{ giftdetails.gold * exchange_num }} 兑换</span>
        </div>
      </div>
      <div class="sendFriends" v-show="!isExchange">
        <div>赠送好友</div>
        <div>
          <input type="number" v-model="friends_id" @input="search()" placeholder="赠送好友id" />
        </div>
        <div class="search" :style="{ height: heighr_ + 'vw' }">
          <div class="user_list" v-for="(item, index) in friends_list" :key="index" @click="clear(item)">
            <img :src="item.head_pic" alt="" />
            <div>
              <span>{{ item.nickname }}</span>
              <span>ID：{{ item.perfect_number }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    reactive,
    watch,
    ref,
    toRefs,
    computed
  } from "vue";
  import MessageBoxFun from '@/components/message_box/MessageBox'
  import DiaLogFun from '@/components/dia_log/DiaLog'
  import {
    lotteryShoplist,
    lotteryShopexchange,
    activityLeaderSign,
    searchUserList
  } from '@/api/user'
  import {
    useRouter,
    useRoute
  } from 'vue-router'
  import HeaderComponent from "@/components/header_component/HeaderComponent.vue";
  export default defineComponent({
    components: {
      HeaderComponent
    },
    setup() {
      const router: any = useRouter()
      const route: any = useRoute()
      const data = reactive < Record < string,
        any >> ({
          giftdetails: {}, //礼品详情
          dressloadShow: true,
          shoplist: {
            gift_list: [],
            goods_list: [],
          }, //装扮兑换或赠送
          cur: 1,
          Turn_s: false,
          exchange_num: 1, //兑换数量
          isExchange: false, //兑换true赠送false
          friends_id: "", //好友id
          friends_list: [], //搜索到的好友列表
          touserid: "",
          shopexchange: "",
          height: '45',
        })
      const exchange_num = ref(data.exchange_num)
      const heighr_ = computed(() => {
        return data.friends_list.length > 4 ? 4 * 13.4 + 6 : data.friends_list.length * 13.4 + 6
      })
      watch(exchange_num.value, (newVal) => {
        if ((newVal as any) > 999) {
          MessageBoxFun({
            message: '最多兑换999',
            delay: 1000
          })
        }
      }, {
        deep: true
      })
      const homePage = async (type: string): Promise < void > => {
        data.cur = type
        const arys = {
          type: type
        }
        const dataRes = await lotteryShoplist(arys)
        data.shoplist = dataRes.data.result;
        data.dressloadShow = false;
      }
      const Jump_ex = (): void => {
        router.push({
          path: '/exchangeRecord',
          query: {
            reductName: route.path
          }
        })
      }
      const Turn = (ex: string, item: Record < string, any > , shopexchange: string): void => {
        data.exchange_num = 1;
        data.giftdetails = {};

        if (ex === "1") {
          data.isExchange = true;
        } else {
          data.isExchange = false;
        }
        data.shopexchange = shopexchange; //1兑换2赠送
        data.giftdetails = item; //礼物消息
        data.Turn_s = !data.Turn_s;
      }
      const ExchangeGifts = async (): Promise < void > => {
        const num = data.exchange_num
        const id = data.giftdetails.goodsId ?
          data.giftdetails.goodsId :
          data.giftdetails.id
        const touserid = data.touserid
        const type = data.shopexchange
        const arys = {
          num,
          id,
          touserid,
          type
        }
        const dataRes = await lotteryShopexchange(arys)
        homePage(data.cur)
        data.Turn_s = false
        MessageBoxFun({
          message: dataRes.data.text,
          delay: 2000
        })
      }
      const give_friends = async (): Promise < void > => {
        await activityLeaderSign({})
      }
      const reduce = (): void => {
        if (data.exchange_num < 2) {
          console.log(1321)
          return MessageBoxFun({
            message: "兑换数量不能少于1",
            delay: 1500
          });
        }
        data.exchange_num--;
      }
      const plus = (): void => {
        data.exchange_num++;
      }
      const search = async (): Promise < void > => {
        if (!data.friends_id || data.friends_id.length < 4) {
          data.friends_list = []
          return
        }
        let arys = {
          type: "1",
          key: data.friends_id,
          page: "1",
        }
        const dataRes = await searchUserList(arys)
        data.friends_list = dataRes.data.result.user
      }
      const clear = (item: Record < string, any > ): void => {
        data.touserid = item.user_id
        DiaLogFun({
          title: '确认赠送',
          message: "赠送" + item.nickname + data.giftdetails.goodsName,
          successCallback: function () {
            ExchangeGifts()
          }
        })
      }
      homePage(data.cur)
      return {
        heighr_,
        homePage,
        Jump_ex,
        Turn,
        ExchangeGifts,
        give_friends,
        reduce,
        plus,
        search,
        clear,
        ...toRefs(data)
      }
    }
  })
</script>

<style lang="less" scoped>
  @import './DressUpExchange.less';
</style>